<template>
    <div class="materialWarp" v-if="dataObj !== null">

        <div class="modelContainer">

            <div class="categoryItem">
                <span class="categoryItemTitle">材质名称</span>
                <span class="modelName">
                        <input @keydown="renameModelInput"
                                type="text"
                                v-model="dataObj.material.name"
                                disabled="disabled"
                        >&nbsp;

                        <i class="icon iconfont icon-xiugai editor-ico"  @click="renameModel"></i>
                    </span>
            </div>

            <div class="categoryItem">
                <span class="categoryItemTitle">类型</span>
                <OptionPickerCmp class="selectBox typeOption" :data="materialTypeOption" :materialData="dataObj" :className="className1" :callBackName="callBackName"/>
            </div>

            <div class="categoryItem">
                <span class="categoryItemTitle">混合模式</span>
                <OptionPickerCmp class="selectBox mixOption" :data="blendingTypeOption" :materialData="dataObj" :className="className2"/>
            </div>

            <div class="categoryItem">
                <span class="categoryItemTitle">单面</span>
                <span class="radioBtn material" @click="toggleClass($event, dataObj.material.side, 'side')" ref="singleFaceRadioBtn"></span>
            </div>

            <div class="categoryItemBottom envMapBottom">
                <span class="categoryItemTitle">环境贴图</span>
                <span class="radioBtn envMap" @click="toggleClass($event, dataObj.material.envMap, 'envMap')" ref="envMapRadioBtn"></span>
                <span class="shadowBoxSingle"  @click="changeEnvMap">
                    {{dataObj.material.envMap !== null ? dataObj.material.envMap.name : textureObj !== null ? textureObj.name : "点击选择图片"}}
                </span>
            </div>

            <div class="categoryItem">
                <div class="weightContent" id="envMapWeight"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[1]" :weightContent="dataObj.material.name"/></div>
            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>环境光遮蔽</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.aoMap && dataObj.material.aoMap !== null">
                        <div class="texturePick" mapType="aoMap">
                            <img v-bind:src="dataObj.material.aoMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.aoMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="aoMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'aoMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[0]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>漫反射</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.map && dataObj.material.map !== null">
                        <div class="texturePick" mapType="map">
                            <img v-bind:src="dataObj.material.map.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.map.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="map">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'map')"></button>

                    <div class="weightContent"><ColorPicker :color="dataObj.material.color"/></div>

                </div>

            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>金属度</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.metalnessMap && dataObj.material.metalnessMap !== null">
                        <div class="texturePick" mapType="metalnessMap">
                            <img v-bind:src="dataObj.material.metalnessMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.metalnessMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="metalnessMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'metalnessMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[2]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>自发光</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.emissiveMap && dataObj.material.emissiveMap !== null">
                        <div class="texturePick" mapType="emissiveMap">
                            <img v-bind:src="dataObj.material.emissiveMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.emissiveMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="emissiveMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'emissiveMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[3]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>不透明度</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.alphaMap && dataObj.material.alphaMap !== null">
                        <div class="texturePick" mapType="alphaMap">
                            <img v-bind:src="dataObj.material.alphaMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.alphaMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="alphaMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'alphaMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[4]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div class="materialItem">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>法线</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.normalMap && dataObj.material.normalMap !== null">
                        <div class="texturePick" mapType="normalMap">
                            <img v-bind:src="dataObj.material.normalMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.normalMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="normalMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'normalMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[5]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div class="materialItem materialItemBottom">
                <div class="materialItemTitle" @click="slideTitleToggle">
                    <span>粗糙度</span>
                    <i class="el-icon-arrow-down"></i>
                </div>

                <div class="materialItemContainer">
                    <div v-if="dataObj.material.roughnessMap && dataObj.material.roughnessMap !== null">
                        <div class="texturePick" mapType="roughnessMap">
                            <img v-bind:src="dataObj.material.roughnessMap.image.src" alt="">
                        </div>
                        <span class="texturePickTitle texturePickTitleActive">{{dataObj.material.roughnessMap.name}}</span>
                    </div>

                    <div v-else>
                        <div class="texturePick" mapType="roughnessMap">
                            <img src="" alt="">
                        </div>
                        <span class="texturePickTitle">请将素材库中素材拖动至左侧框内</span>
                    </div>

                    <button class="icon iconfont icon-shanchu deleteMapBtn" @click="clearMapTextures($event, 'roughnessMap')"></button>

                    <div class="weightContent"><WeightPicker :data="dataObj" :mapType="mapTexturesTypeList[6]" :weightContent="dataObj.material.name"/></div>

                </div>

            </div>

            <div id="mapTexturesInfo"></div>

        </div>


    </div>
</template>

<script>
    /* eslint-disable */
    import $ from "jquery";
    import Vue from "vue";
    import BaseUtil from "@/utils/baseUtil.js";

    import OptionPickerCmp from "@/components/styleComponents/optionPickerCmp.vue";
    import WeightPicker from "@/components/styleComponents/weightPickerCmp.vue";
    import ColorPicker from "@/components/styleComponents/colorPickerCmp.vue";

    export default {
        name: "material",

        data () {
            return {

                dataObj: this.$props.data,

                materialTypeOption: [
                    {key: "BASIC", value: "MeshBasicMaterial", selected: false},
                    {key: "PHYSICAL", value: "MeshPhysicalMaterial", selected: false},
                    {key: "STANDARD", value: "MeshStandardMaterial", selected: false},
                ],

                blendingTypeOption: [
                    {key: "NO", value:  Halo.NoBlending, selected: false},
                    {key: "NORMAL", value: Halo.NormalBlending , selected: false},
                    {key: "Additive", value: Halo.AdditiveBlending , selected: false},
                    {key: "Subtractive", value: Halo.SubtractiveBlending , selected: false},
                    {key: "Multiply", value: Halo.MultiplyBlending , selected: false},
                    {key: "Custom", value: Halo.CustomBlending , selected: false},
                ],

                textureName: "",

                textureObj: null,

                isInit: false,

                className1: ".selectBox.typeOption",

                className2: ".selectBox.mixOption",

                mapTexturesTypeList: ["aoMap", "envMap", "metalnessMap", "emissiveMap", "alphaMap", "normalMap", "roughnessMap"],

                callBackName: "onMaterialTypeChanged",
            }
        },

        mounted () {

            const _this = this;

            this.init();

            this.$root.$on("onMaterialTypeChanged", _this.onMaterialTypeChanged)
        },

        watch : {
            data (val) {

                this.textureObj = null;

                this.textureName = "";

                this.dataObj = val || null;

                this.init();

            },

            materialIndex: {
                handler () {
                    this.init();
                }
            }
        },

        props: ["data", "materialIndex"],

        components: {
            OptionPickerCmp,
            WeightPicker,
            ColorPicker
        },

        methods: {

            init () {

                $("#envMapWeight").hide();

                if (this.dataObj === null) return false;

                this.setRadioBtnType();

                this.setTypePickerValue();

                this.initDraggingEvent();

                this.setEnvMapTextures();

                this.$root.$emit("pickDataChanged", {
                    className: ".selectBox.typeOption",
                    dataObj: this.dataObj,
                    option: this.materialTypeOption
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".selectBox.mixOption",
                    dataObj: this.dataObj,
                    option: this.blendingTypeOption
                });

                setTimeout(() => $("#envMapWeight").show(), 100);

                this.setMapTexturesInfo();

            },

            toggleClass (e, val, attr) {

                $(e.target).toggleClass("el-icon-check");

                if (attr === "side") {

                    if (val === 0) {
                        val = 2;
                    } else {
                        val = 0;
                    }
                }

               if (attr === "envMap") {

                   if (val !== null) {

                       val = null;

                       $("span.shadowBoxSingle").addClass("envMapDisabled");

                   } else {

                       $("span.shadowBoxSingle").removeClass("envMapDisabled");
                   }
               }

                this.dataObj.material[attr] = val;
                this.dataObj.material.needsUpdate = true;

            },

            slideToggleAni (e) {

                let target = e.target;

                if (!$(target).hasClass("title") && !$(target).hasClass("el-switch__core") &&
                    !$(target).hasClass("el-icon-delete deleteIco")) {
                    target = $(target).parent(".title");
                }

                if (!$(target).hasClass("el-icon-delete deleteIco")) {
                    $(target).toggleClass('titleActive');
                    $(target).siblings().eq(0).slideToggle(200);
                }
            },

            changeVal (e, data, param) {

                if (e.keyCode === 13) {

                    const target = e.target;

                    this.$store.dispatch('edited', {
                        target: target,
                        value: data[param].toFixed(2)
                    });

                    BaseUtil.changeVal(target, data, param);

                }

            },

            setRadioBtnType () {

                const _this = this;

                this.$forceUpdate();

                this.$nextTick(() => {

                    if (_this.dataObj.material.side > 0) {
                        $(_this.$refs.singleFaceRadioBtn).addClass("el-icon-check");
                    } else {
                        $(_this.$refs.singleFaceRadioBtn).removeClass("el-icon-check");
                    }

                    if (_this.dataObj.material.envMap !== null) {
                        $(_this.$refs.envMapRadioBtn).addClass("el-icon-check");
                        $("span.shadowBoxSingle").removeClass("envMapDisabled");
                    } else {
                        $(_this.$refs.envMapRadioBtn).removeClass("el-icon-check");
                        $("span.shadowBoxSingle").addClass("envMapDisabled");
                    }

                })
            },

            renameModelInput (e) {

                if (e.keyCode === 13) {

                    $(e.target).attr("disabled", "disabled");

                    const name = $.trim($(e.target).val());

                    if (name) {
                        let nameStr = "";

                        if (this.dataObj.material.uuid) {
                            nameStr = this.dataObj.material.name;
                        } else {
                            nameStr = this.dataObj.material.name;
                        }

                        const scene = Halo.Config.scene();

                        // eslint-disable-next-line
                        Editor.rename("mat", nameStr, name);

                        Editor.save("scn", scene.name, scene);
                    }

                }
            },

            renameModel (e) {
                $(e.target).siblings().removeAttr("disabled");
                $(e.target).siblings().focus();
            },

            setTypePickerValue () {

                let isFind = false;

                let k = "";
                let item = {};
                for (k in this.materialTypeOption) {

                    item = this.materialTypeOption[k];
                    item.selected = false;

                    if (this.dataObj.material.type === item.value) {
                        item.selected = true;
                        isFind = true;
                    }
                }

                if (!isFind) {
                    this.materialTypeOption[0]["selected"] = true;
                }

                isFind = false;
                k = "";
                item = {};
                for (k in this.blendingTypeOption) {

                    item = this.blendingTypeOption[k];
                    item.selected = false;

                    if (this.dataObj.material.blending === item.value) {
                        item.selected = true;
                        isFind = true;
                    }
                }

                if (!isFind) {
                    this.materialTypeOption[0]["selected"] = true;
                }

            },

            changeEnvMap () {

                if ($("span.shadowBoxSingle").hasClass("envMapDisabled")) return;

                let domStr = '<div class="texturesPickView"> ' +
                    '<div class="texturesPickContent"></div> ' +
                    '<button id="evnMapSelectComplete" class="btnDisabled">确定</button> ' +
                    '<button class="el-icon-close closeBtn"></button>' +
                    '</div>';

                $(".scenesView").append(domStr);

                this.setTextures($(".texturesPickView>div"));

                $(".texturesPickView").fadeIn(300);

                this.createButtonEvent($("#evnMapSelectComplete"));
                this.createButtonEvent($(".el-icon-close.closeBtn"));

                this.texturesItemsEvent($(".texturesPickContent>div"));
            },

            texturesItemsEvent (targetArr) {


                let name = "";
                let index = 0;
                for (index; index < targetArr.length; index ++) {

                    name = targetArr.eq(index).find("img").attr("name");

                    targetArr.eq(index).on("click", this.createTexturesButtonEvent.bind(this, index, name));
                }
            },

            createTexturesButtonEvent (index, imgName) {

                $(".texturesPickContent div img").removeClass("selectedItem");

                $(".texturesPickContent>div").eq(index).children("img").addClass("selectedItem");

                $("#evnMapSelectComplete").addClass("btnEnabled");

                this.textureName = imgName;
            },

            createButtonEvent (target) {

                target.on("click", () => {

                    if (target.attr("id") && target.attr("id") === "evnMapSelectComplete") {
                        // eslint-disable-next-line
                        const textureObj = Halo.ResourceManager.getObj("img", this.textureName);

                        this.dataObj.material["envMap"] = textureObj;

                        if (!this.dataObj.material.needsUpdate) this.dataObj.material.needsUpdate = true;

                    }

                    $(".texturesPickView").fadeOut(300, () => {
                        $(".texturesPickView").remove();
                    });
                });
            },

            setTextures (target) {

                if (Vue.prototype.baseConfig.textures) {

                    let k = "";
                    let src = "";

                    for (k in Vue.prototype.baseConfig.textures) {

                        // eslint-disable-next-line
                        if (Halo.ResourceManager.getObj("img", k) !== null) {

                            // eslint-disable-next-line
                            src = Halo.ResourceManager.getObj("img", k).image.src;

                            target.append(`<div> <img src="${src}" name="${k}"> <span>${k}</span> <div/>`);

                        }

                    }
                }
            },

            slideTitleToggle (e) {

                let target = e.target;

                if (!$(target).hasClass("materialItemTitle")) {
                    target = $(target).parent();
                }

                $(target).toggleClass("materialItemTitleActive");

                $(target).siblings().eq(0).slideToggle(200);
            },

            initDraggingEvent () {

                const _this = this;

                this.$nextTick(() => {

                    const pickViewArr = $(".materialItemContainer .texturePick");

                    let i = 0;
                    for (i; i < pickViewArr.length; i++) {
                        $(pickViewArr[i]).off("drop");
                        $(pickViewArr[i]).on("drop", _this.onDrop.bind(this, pickViewArr[i]));
                    }
                });

                this.isInit = true;

            },

            onDrop (target, e) {

                const userAgent = navigator.userAgent;
                const isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1;

                if (!isSafari && e.originalEvent.dataTransfer.files.length) return;
                if (isSafari && e.originalEvent.dataTransfer.files.length > 1) return;

                this.$root.$emit("enterPick", {target: target, dataObj: this.dataObj});

                this.initDraggingEvent();
            },

            setEnvMapTextures () {

                this.$nextTick(() => {

                    const pickViewArr = $(".materialItemContainer .texturePick");

                    let i = 0;
                    for (i; i < pickViewArr.length; i++) {

                        $(pickViewArr[i]).find("img").attr("src", "");
                        $(pickViewArr[i]).siblings().eq(0).text("请将素材库中素材拖动至左侧框内").removeClass("texturePickTitleActive");

                        const mapType = $(pickViewArr[i]).attr("mapType");

                        if (this.dataObj.material[mapType] && this.dataObj.material[mapType] !== null) {

                            $(pickViewArr[i]).find("img").attr("src", this.dataObj.material[mapType].image.src);

                            $(pickViewArr[i]).siblings().eq(0).text(this.dataObj.material[mapType].name).addClass("texturePickTitleActive");
                        }
                    }
                });

                if (this.$props.intensityId && $(".materialWarp").css("top") === "-45px") {
                    $(".materialWarp").css({left: 0, top: 0}).show();
                }

            },

            onMaterialTypeChanged () {

                this.initDraggingEvent();

                this.setRadioBtnType();
            },

            clearMapTextures (e, attr) {

                const target = $(e.target);

                this.dataObj.material[attr] = null;
                this.dataObj.material.needsUpdate = true;

                target.parent().find(".texturePickTitle").text("请将素材库中素材拖动至左侧框内");

                this.initDraggingEvent();
            },

            setMapTexturesInfo () {

                let innerHtml = "";

                const objDeps = Editor.getDepsNObj(this.dataObj.material);

                const imgStyle = 'width: 150px;height: 150px;background-size: contain;box-shadow: inset 0 0 15px rgba(182,184,220,1);' +
                    'overflow: hidden;margin: 0 auto;border-radius: 5px;';

                const spanStyle = 'display: block;margin-top: 15px;';

                objDeps.forEach((item) => {
                    innerHtml += `<span style="${spanStyle}">${item.name}</span> <img src="${item.obj.src}" style="${imgStyle}">`;
                });

                $("#mapTexturesInfo").html(innerHtml);
            },

        }
    }
</script>

<style scoped>

    .materialWarp {
        width: 100%;
        color: rgba(182, 184, 220, 1);
        box-sizing: border-box;
        margin: 0 auto;
        border-radius: 5px;
        position: relative;
    }

    .title {
        width: 100%;
        height: 30px;
        background:rgba(65,67,91,1);
        font-size: 12px;
        border-radius: 5px;
        position: relative;
        line-height: 30px;
        cursor: pointer;
    }

    .titleActive {
        background-color: rgba(105, 108, 145, 1);
        border-radius: 5px 5px 0 0;
    }

    .titleActive {
        transition: .5s all;
        transform: rotateZ(90deg);
    }

    .modelContainer {
        background-color: rgba(52,54,74,1);
        border-radius: 0 0 5px 5px;
        border-top: 1px solid rgba(31,33,49,1);
    }

    .title span {
        position: absolute;
        left: 34px;
        max-width: 120px;
        overflow: hidden;
    }

    .title:hover span, .title:hover {
        color: rgba(213, 215, 250, 1);
    }

    .el-icon-delete.deleteIco {
        position: absolute;
        right: 70px;
        top: 9px;
    }

    .shadowBoxSingle {
        font-size: 13px;
        font-weight: 100;
        color:rgba(182,184,220,1);
        display: inline-block;
        height: 30px;
        background-color: rgba(31, 33, 49, 1);
        border-radius:5px;
        line-height: 30px;
        padding: 0 5px;
        position: absolute;
        right: 14px;
        cursor: pointer;
        max-width: 180px;
        text-align: center;
    }

    .categoryItem {
        padding-top: 14px;
    }

    .materialWarp .categoryItemBottom {
        padding: 14px 0 20px 0;
    }

    .envMapBottom {
        border-bottom: 1px solid rgba(31, 33, 49, 1);
    }

    .categoryItemTitle {
        font-size: 12px;
        font-weight: 100;
        color: rgba(182,184,220,1);
        padding-left: 15px;
    }

    .radioBtn {
        display: inline-block;
        width: 14px;
        height: 12px;
        border: 2px solid rgba(47, 48, 66, 1);
        border-radius: 2px;
        position: relative;
        cursor: pointer;
        margin-left: 17px;
        box-sizing: border-box;
        vertical-align: middle;
        padding: 0;
    }

    .radioBtn.el-icon-check {
        font-weight: bold;
        font-size: 12px;
        color: rgba(113, 215, 203, 1);
    }

    .materialWarp .modelName {
        display: inline-block;
        width: 220px;
        height: 30px;
        line-height: 30px;
        margin-left: 44px;
        position: relative;
    }

    .materialWarp .categoryItem .modelName input {
        position: absolute;
        width: 180px;
        height: 30px;
        text-align: right;
        right: 16px;
        background: transparent;
        border: none;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
    }

    .materialWarp .categoryItem .modelName i {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        font-size:14px;
        color: rgba(105, 108, 145, 1);
    }

    .materialWarp .categoryItem .modelName i:hover {
        color: rgba(180, 183, 218, 1);
    }

    .material {
        margin-left: 70px;
    }

    .envMap {
        margin-left: 46px;
    }

    .selectBox {
        position: absolute;
        right: 14px;
    }

    .materialItemTitle {
        width: 100%;
        height: 40px;
        background:rgba(31,33,49,1);
        font-size: 12px;
        position: relative;
        line-height: 40px;
        cursor: pointer;
        border-top: 1px solid rgba(12, 13, 18, 1);
    }

    .materialItemTitle span {
        padding-left: 14px;
    }

    .materialItemTitle i {
        color: rgba(61,63,86,1);
        font-size: 14px;
        font-weight: 100;
        transition: .5s all;
        transform: rotateZ(0);
        position: absolute;
        top: 13px;
        right: 14px;
    }

    .materialItemTitle:hover i {
        color: rgba(105,108,145,1);
    }

    .materialItemTitleActive {
        background: rgba(105,108,145,1) !important;
    }

    .materialItemTitleActive i {
        color: rgba(182,184,220,1) !important;
        transition: .5s all;
        transform: rotateZ(180deg) !important;
    }

    .materialItemBottom {
        border-bottom: 1px solid rgba(12, 13, 18, 1);
    }

    .materialItemContainer {
        width: 100%;
        background:rgba(47,48,66,1);
        display: none;
        position: relative;
    }

    .materialItemContainer .texturePick {
        width: 80px;
        height: 80px;
        display: inline-block;
        border-radius: 1px;
        box-sizing: border-box;
        background: url("") center center no-repeat;
        margin: 19px 0 0 14px;
    }

    .materialItemContainer .texturePick img {
        background-size: cover;
        width: 80px;
        height: 80px;
    }

    .materialItemContainer .texturePickTitle {
        display: inline-block;
        max-width: 200px;
        height: 12px;
        overflow: hidden;
        font-size:12px;
        font-weight:100;
        color:rgba(117,122,159,1);
        margin: 19px 0 0 20px;
        line-height: 12px;
        vertical-align: top;
    }

    .materialItemContainer .weightContent {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        line-height: 12px;
        margin-top: 20px;
        margin-left: 0;

    }


    .texturePickTitleActive {
        color:rgba(182, 184, 220, 1) !important;
    }

    .materialItemContainer .icon.iconfont.icon-shanchu.deleteMapBtn {
        position: absolute;
        right: 14px;
        top: 17px;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
    }

    #mapTexturesInfo {text-align: center}

</style>